<template>
    <el-dialog
        custom-class="ba-operate-dialog cu-dialog"
        :close-on-click-modal="false"
        :model-value="baTable.form.operate == 'detail'"
        @close="onClosed();"
        @open="onOpen"
        width="70%"
        :fullscreen="true"
        v-loading="loading"
    >
        <template #header>
            <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
                审批详情 - {{ baTable.form.items!.name }}
            </div>
        </template>
        <div class="container">
            <div class="steps-warp">
                <el-steps space="10%" :active="active_step" :align-center="true" finish-status="success" process-status="finish">
                    <el-step :key="index" :title="item.name" v-for="item, index in detail.nodes"/>
                </el-steps>
            </div>
            <div class="warp">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="title">审批信息</div>
                        <div class="info-content">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">业务名称:</span>
                                        <span class="value">{{baTable.form.items!.project_name}}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">流程类型:</span>
                                        <span class="value">{{flowModel[baTable.form.items!.flow_model]}}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">申请人:</span>
                                        <span class="value">{{ baTable.form.items!.creator_name }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">申请时间:</span>
                                        <div class="value">{{ baTable.form.items!.creator_time }}</div>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">审批状态:</span>
                                        <span class="value"><el-text :type="flowStateColor[baTable.form.items!.state]">{{ flowState[baTable.form.items!.state] }}</el-text></span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="info-content-item">
                                        <span class="label">当前审批人:</span>
                                        <span class="value">{{ baTable.form.items!.audit_name }}</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <div class="info-content-item" v-if="baTable.form.items!.complete_time">
                                        <span class="label">完成时间:</span>
                                        <span class="value">{{ baTable.form.items!.complete_time }}</span>
                                    </div>
                                </el-col>
                                <el-col :span="12"></el-col>
                            </el-row>
                        </div>
                        <div class="title" style="border-top: 1px solid #ddd ;">申请单据</div>
                        <div class="info-content">
                            <el-scrollbar :height="scrollbarHeight2">
                                <component :is="detailKitName" :content="detailContent"></component>
                            </el-scrollbar>
                        </div>                        
                    </el-col>
                    <el-col :span="8" style="border-left:1px solid #ddd">
                        <div class="title">审批记录</div>
                        <el-scrollbar :height="scrollbarHeight">
                            <div class="records-content">
                                <el-timeline>
                                    <el-timeline-item :timestamp="item.create_time" placement="top" :key="index" v-for="item, index in records">
                                        <div class="timeline-content">
                                            <el-text v-if="item.node_step > 1">{{ item.scope_name }}&nbsp;&nbsp;&nbsp;&nbsp;</el-text>
                                            <el-text v-if="item.node_step > 1" :type='item.audit_state == 1 ? "success" : "danger"'>{{ item.audit_state == 1 ? "已同意" : "已驳回" }}&nbsp;&nbsp;&nbsp;&nbsp;</el-text>
                                            {{ item.msg }}
                                            <div class="imgs-content" v-if="item.attachs && item.attachs.length > 0">
                                                <el-image style="width: 100px; height: 100px" :src="img" :preview-src-list="item.attachs" :initial-index="index" :key="index" fit="contain" v-for="img, index in item.attachs"/>
                                            </div>
                                            <el-form :model="auditForm" label-width="70px" v-if="item.isAudit">
                                                <el-form-item label="审批意见">
                                                    <el-radio-group v-model="auditForm.audit_state">
                                                        <el-radio label="1" >同意</el-radio>
                                                        <el-radio label="0" >驳回</el-radio>
                                                    </el-radio-group>
                                                </el-form-item>
                                                <el-form-item label="备注">
                                                    <el-input v-model="auditForm.msg" :rows="2" type="textarea" placeholder="请输入" />
                                                </el-form-item>
                                                <el-form-item label="附件">
                                                    <BaUpload type="images" v-model="auditForm.attachs"/>
                                                </el-form-item>
                                                <el-form-item>
                                                    <el-button type="primary" @click="submitAudit">确定</el-button>
                                                </el-form-item>
                                            </el-form>
                                        </div>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-scrollbar>
                    </el-col>
                </el-row>
            </div>
        </div>
        <template #footer>
            <div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
                <el-button @click="onClosed">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
interface AuditForm {
    msg: string
    audit_state: number|string
    node_id: number
    flow_id: number
    node_step: number
    node_type: number
    scope_id: number
    scope_name: string
    attachs: string
    flow_no: string
}

import type { FormInstance,FormRules, FormItemRule, TreeNode  } from 'element-plus'
import { ElMessage } from 'element-plus'
import { inject, reactive, ref, onMounted, defineOptions } from 'vue'
import { useI18n } from 'vue-i18n'
import { useConfig } from '/@/stores/config'
import { useSiteConfig } from '/@/stores/siteConfig'
import type baTableClass from '/@/utils/baTable'
import { getWorkerFlowDetail, wfAudit } from '/@/api/backend/index'
import {flowModel, flowState, flowStateColor} from '/@/utils/enums'
import advance from '/@/components/wokerflow/advance.vue'
import payment from '/@/components/wokerflow/payment.vue'
import reimbursement from '/@/components/wokerflow/reimbursement.vue'
import project from '/@/components/wokerflow/project.vue'
import { timeFormat } from '/@/utils/common'
import { useAdminInfo } from '/@/stores/adminInfo'
import BaUpload from '/@/components/baInput/components/baUpload.vue'

const formRef = ref<FormInstance>()
const baTable = inject('baTable') as baTableClass
const scrollbarHeight = ref()
const scrollbarHeight2 = ref()
const { t } = useI18n()
const adminInfo = useAdminInfo()
const siteConfig = useSiteConfig()
defineOptions({
    components: { advance, payment, reimbursement, project},
})

let detail:any = ref({})
let detailKitName = ref('')
let detailContent = ref({})
let records = ref([])
let auditForm = reactive<AuditForm>({
    msg: '',
    audit_state: '',
    node_id: 0,
    flow_id: 0,
    node_step: 0,
    node_type: 0,
    scope_id: 0,
    scope_name: '',
    attachs: '',
    flow_no: ''
})
let loading = ref(false)
let active_step = ref(0)

onMounted(() => {
    scrollbarHeight.value = window.innerHeight - 237;
    scrollbarHeight2.value = window.innerHeight - 387;
})

const onOpen = () => {
    getWorkerFlowDetail({no: baTable.form.items!.flow_no}).then((res: any) => {
        detail.value = reactive(res.data)
        active_step.value = res.data.state == 3 ? res.data.audit_step : res.data.audit_step - 1
        detailKitName.value = ['', 'reimbursement', 'advance', 'payment', 'project'][res.data.flow_model]
        detailContent.value = res.data.content
        // records = reactive<any[]>([])
        res.data.records.forEach((item: any) => {
            if(item.record_type == 2) {
                item.create_time = timeFormat(item.create_time*1000)
                const attachs = item.attachs ? item.attachs.split(',') : []
                item.attachs = attachs.map((img: any) => {
                    img = siteConfig.cdnUrl + img
                    return img
                })
                records.value.push(item)
            }
        });
        const audit_ids = res.data.audit_id.split(',')
        if(audit_ids.indexOf(String(adminInfo.id)) > -1 && res.data.state == 1){
            records.value.push({
                create_time: timeFormat(),
                isAudit: true,
            })
            auditForm.node_id = res.data.nodes.find((p: any) => p.step == res.data.audit_step)['id'];
            auditForm.flow_id = res.data.id;
            auditForm.node_step = res.data.audit_step;
            auditForm.node_type = 2;
            let now_scopes = res.data.scopes.find((p: any) => p.node_step == res.data.audit_step);
            auditForm.scope_id = now_scopes.scope_id;
            auditForm.scope_name = now_scopes.scope_name;
            auditForm.flow_no = res.data.flow_no;
        }
        console.log('auditForm', auditForm)
    })
}

const submitAudit = () => {
    if(auditForm.audit_state == "") return ElMessage.error('请选择审批意见')
    loading.value = true
    wfAudit(auditForm).then((res: any) => {
        ElMessage.success('审批成功！')
        setTimeout(() => {
            onClosed() 
        }, 1500);
    }).finally(() =>{
        loading.value = false
    })
}

const onClosed = () => {
    baTable.getIndex()
    baTable.toggleForm()
    auditForm.node_id = 0
    auditForm.flow_id = 0
    auditForm.node_step = 0
    auditForm.node_type = 0
    auditForm.scope_id = 0
    auditForm.scope_name = ''
    auditForm.attachs = ''
    auditForm.msg = ""
    auditForm.flow_no = ''
    auditForm.audit_state = ''
    records.value = []
}

</script>
<style lang="scss">
    .el-dialog.cu-dialog.is-fullscreen { overflow: hidden; }
</style>
<style scoped lang="scss">
     .ba-operate-dialog {
        background-color: #333;
     }
    .steps-warp { 
        padding: 20px 20px 10px 20px; display: flex; justify-content: center; border-bottom: 1px solid #f5f5f5;
        .el-steps { flex: 1; justify-content: center;}
    }
    .warp {
        .title { font-size: 14px; font-weight: bold; padding: 8px 0; }
        .info-content {
            // border-right: 1px solid #ddd; height: calc(100vh - 237px);
            .info-content-item {
                display: flex; justify-content: flex-start; padding: 5px 10px; align-items: center;
                .label { display: inline-block; white-space: nowrap; padding-right: 13px; font-weight: bold;font-size: 13px;}
                .value {
                    font-size: 13px;
                    .ml-2 { 
                        margin-bottom: 10px;
                        margin-right: 10px
                    }
                }
                div.value {
                    
                }
            }
        }
    }
    .records-content {
        --el-upload-picture-card-size: 80px;
        :deep .el-upload {
            height: 80px; 
            width: 80px;
            .ba-upload-select-image { width: 100%; height: 24px; line-height: 24px; }
            .el-upload-list.el-upload-list--picture-card {
                --el-upload-list-picture-card-size: 80px;
            }
        }
        :deep .el-upload-list--picture-card {
            --el-upload-list-picture-card-size: 80px;
        }

    }
    .imgs-content { 
        padding: 8px 0;

        .el-image { background-color: #ddd; margin: 0 8px 8px 0; }
     }
</style>
